<template>
  <div>
    <van-nav-bar
      :title="$t('message.personalizedTitle')"
      left-arrow
      @click-left="onClickLeft"
    />
    <ul class="list">
      <li v-for="item in list" :key="item.id" @click="play(item)">
        <div class="left">
          <van-image
            width="50"
            height="50"
            :src="item.picUrl"
          />
        </div>
        <div class="right">
          <div class="name">{{item.name}}</div>
          <div class="des">
            {{ item.song.artists.map(artist=>artist.name).join('-') }} - {{item.name}}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { newsong } from '@/services/recommend'
import { ref } from '@vue/reactivity'
import { useRouter } from 'vue-router'
const list = ref([])
const router = useRouter()

newsong(20).then(res=>{
  list.value = res.data.result
})

const onClickLeft = () => {
  router.go(-1)
}

const play = (data:any) => {
  router.push({
    name: 'play',
    query: { 
      id: data.id
    }
  })
}


</script>

<style lang="scss" scoped>
@mixin text-ellipsis($line: 2) {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}
::v-deep(.van-nav-bar){
  color: #fff;
  .van-nav-bar__content{
    background-color: #73521F;
    .van-icon,
    .van-nav-bar__title{
      color: #fff;
    }
  }
}
.list{
  padding: 0 15px;
  height: calc(100vh - 76px);
  overflow: auto;
  li{
    display: flex;
    padding: 10px;
    .left{
      width: 60px;
    }
    .right{
      width: calc(100% - 60px);
      .name{
        @include text-ellipsis(1);
      }
      .des{
        @include text-ellipsis(1);
        margin-top: 10px;
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>